<template>
  <div class="mymenu">

    <nav class="nav">
      <router-link to="/personal" class="goback">&lt;</router-link>
      菜谱
    </nav>

    <ul>
      <li v-for="(item,index) in imgarr" :key="index" class="clearfix">
  <van-swipe-cell>
  <van-card
    :num=item.length
    :price="item.time"
    :desc="item.date"
    :title="item.title"
    class="goods-card"
    :thumb="item.imgurl"
  />
   <template #right>
      <van-button square text="删除" type="danger" @click="del(item.id)" class="delete-button" />
    </template>
    </van-swipe-cell>
  </li>
  </ul>
 

 
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:true,
      imgList: [],
      imgarr:[
        {
          "imgurl":"../../../static/images/prosonal/1.png",
          "title":"满铺草莓蛋糕",
          "date":"2020-10-20",
          "time":"13:14:52",
          "id":1
        },
        {
          "imgurl":"../../../static/images/prosonal/2.png",
           "title":"蒜蓉澳洲龙虾",
          "date":"2020-10-20",
          "time":"13:14:52",
          "id":2         
        }
      ],
    };
  },
  mounted() {
      
  },
    methods: {
　　　　　　del(id){
　　　　　　　　this.imgarr.some((item, i)=>{
　　　　　　　　　　if(item.id==id){
　　　　　　　　　　　　this.imgarr.splice(i, 1)
　　　　　　　　　　　　//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
　　　　　　　　　　　　return true
　　　　　　　　　　}
　　　　　　　　})　　　　　　
　　　　　　},
　　　　　　del(id){
　　　　　　　　var index = this.imgarr.findIndex(item =>{
　　　　　　　　　　if(item.id==id){
　　　　　　　　　　　　return true
　　　　　　　　　　}
　　　　　　　　})
　　　　　　　　this.imgarr.splice(index,1)
　　　　　　}

  },
};
</script>

<style scoped lang="less">
.nav {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background-color: #f3d02a;
  text-align: center;
  position: relative;
  font-size: 16px;
  .goback {
    position: absolute;
    left: 0.2rem;
    font-size: 0.5rem;
    color: #000;
  }
}

  .delete-button {
    height: 100%;
  }


</style>